<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- jQuery UI (for autocomplete) -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    <style>
        .upload-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }
        .upload-box {
            width: 200px;
            height: 200px;
            border: 2px dashed #ccc;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }
        .upload-box:hover {
            border-color: #0d6efd;
        }
        .plus-icon {
            font-size: 50px;
            color: #ccc;
        }
        .upload-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .file-input {
            display: none;
        }
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center mb-4">图片上传</h2>
        <form id="uploadForm" method="post" enctype="multipart/form-data">
            <!-- 新增客户信息部分 -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">客户信息</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="customerName" class="form-label">客户名称</label>
                            <input type="text" class="form-control" id="customerName" name="customerName" required autocomplete="off">
                        </div>
                        <div class="col-md-6">
                            <label for="instrumentModel" class="form-label">仪器型号</label>
                            <input type="text" class="form-control" id="instrumentModel" name="instrumentModel" required>
                        </div>
                        <div class="col-12">
                            <label for="address" class="form-label">地址</label>
                            <input type="text" class="form-control" id="address" name="address" required>
                        </div>
                        <div class="col-md-6">
                            <label for="contactPerson" class="form-label">联系人</label>
                            <input type="text" class="form-control" id="contactPerson" name="contactPerson" required>
                        </div>
                        <div class="col-md-6">
                            <label for="contactPhone" class="form-label">联系电话</label>
                            <input type="tel" class="form-control" id="contactPhone" name="contactPhone" required>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 原有图片上传部分 -->
            <div class="upload-container">
                <div class="upload-item">
                    <div class="upload-box" onclick="document.getElementById('fileInput1').click()">
                        <input type="file" id="fileInput1" class="file-input" accept="image/*" name="image1">
                        <div class="plus-icon">+</div>
                    </div>
                    <input type="text" class="form-control mt-2 image-caption" placeholder="图片描述" name="caption1">
                </div>
                <div class="upload-item">
                    <div class="upload-box" onclick="document.getElementById('fileInput2').click()">
                        <input type="file" id="fileInput2" class="file-input" accept="image/*" name="image2">
                        <div class="plus-icon">+</div>
                    </div>
                    <input type="text" class="form-control mt-2 image-caption" placeholder="图片描述" name="caption2">
                </div>
                <div class="upload-item">
                    <div class="upload-box" onclick="document.getElementById('fileInput3').click()">
                        <input type="file" id="fileInput3" class="file-input" accept="image/*" name="image3">
                        <div class="plus-icon">+</div>
                    </div>
                    <input type="text" class="form-control mt-2 image-caption" placeholder="图片描述" name="caption3">
                </div>
            </div>
            <div class="text-center mt-4">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </form>
    </div>

    <script>
        $(document).ready(function() {
            // 客户名称自动完成
            $("#customerName").autocomplete({
                source: function(request, response) {
                    // 添加本地测试数据作为备选
                    var localData = [
                        "北京科技有限公司",
                        "上海仪器设备有限公司",
                        "广州测试技术有限公司"
                    ];
                    
                    // 优先尝试API请求
                    $.ajax({
                        url: "C:/Users/46459/PycharmProjects/mettler/customers.json",
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function(data) {
                            console.log("API response:", data);  // 添加调试输出
                            response(data);
                        },
                        error: function(xhr, status, error) {
                            console.error("API request failed:", status, error);  // 添加错误日志
                            // API请求失败时使用本地数据
                            var results = $.ui.autocomplete.filter(
                                localData, 
                                request.term
                            );
                            response(results);
                        }
                    });
                },
                minLength: 1, // 修改为输入1个字符就开始搜索
                delay: 300,  // 添加延迟减少请求频率
                select: function(event, ui) {
                    $(this).val(ui.item.label);
                    return false;
                }
            });

            // 处理文件选择
            $('.file-input').change(function() {
                const fileInput = this;
                const uploadBox = $(this).parent();
                
                if (fileInput.files && fileInput.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        // 移除加号图标
                        uploadBox.find('.plus-icon').remove();
                        
                        // 创建图片元素或更新现有图片
                        let img = uploadBox.find('img');
                        if (img.length === 0) {
                            img = $('<img>');
                            uploadBox.append(img);
                        }
                        
                        img.attr('src', e.target.result);
                    }
                    
                    reader.readAsDataURL(fileInput.files[0]);
                }
            });
        });
    </script>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>